{% extends 'web/layout/manage.html' %}
{% load static %}

{% block css %}
    <style>
        .name-header {
            background-color: #007777;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            color: white;
            text-align: center;
            line-height: 42px;
            font-weight: 100;
            font-size: 50px;
        }

        .total-order-info {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: space-between;
        }

        .item {
            display: flex;
            flex-wrap: wrap;
            width: 80px;
            height: 80px;
        }

        .info-up {
            text-align: center;
            width: 80px;
            height: 40px;
        }

        .info-down {
            text-align: center;
            width: 80px;
            height: 40px;
        }

        .info-up span {
            color: #007777;
            font-weight: bold;
            text-align: center;
            line-height: 40px;
        }

        .info-down span {
            font-size: 30px;
            text-align: center;
            line-height: 40px;
        }


    </style>
{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-md-8">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">任务完成情况</h3>
                </div>
                <div class="panel-body">
                    <div id="statisticChart">

                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">项目详细</h3>
                </div>
                <div class="panel-body">
                    <p>
                        <span>项目名称</span>
                        <span>{{ request.login_user.project.name }}</span>
                    </p>
                    <p>
                        <span>项目描述</span>
                        <span>{{ request.login_user.project.desc }}</span>
                    </p>
                    <p>
                        <span>创建时间</span>
                        <span>{{ request.login_user.project.create_datetime }}</span>
                    </p>
                    <p>
                        <span>存储空间</span>
                        <span>{{ request.login_user.project.use_space }}B</span>/
                        <span>{{ request.login_user.price_policy.project_space }}G</span>
                    </p>
                    <div id="useSpacePie">

                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">工单汇总</h3>
                </div>
                <div class="panel-body">
                    <div class="total-order-info">
                        <div class="item">
                            <div class="info-up">
                                <span>工单总数</span>
                            </div>
                            <div class="info-down">
                                <span>4</span>
                            </div>
                        </div>
                        <div class="item">
                            <div class="info-up">
                                <span>工单总数</span>
                            </div>
                            <div class="info-down">
                                <span>4</span>
                            </div>
                        </div>
                        <div class="item">
                            <div class="info-up">
                                <span>已关闭数量</span>
                            </div>
                            <div class="info-down">
                                <span>4</span>
                            </div>
                        </div>
                        <div class="item">
                            <div class="info-up">
                                <span>执行中数量</span>
                            </div>
                            <div class="info-down">
                                <span>4</span>
                            </div>
                        </div>
                        <div class="item">
                            <div class="info-up">
                                <span>人均数量</span>
                            </div>
                            <div class="info-down">
                                <span>4</span>
                            </div>
                        </div>
                        <div class="item">
                            <div class="info-up">
                                <span>单日最多</span>
                            </div>
                            <div class="info-down">
                                <span>4</span>
                            </div>
                        </div>
                        <div class="item">
                            <div class="info-up">
                                <span>平均时长</span>
                            </div>
                            <div class="info-down">
                                <span>4</span>
                            </div>
                        </div>
                        <div class="item">
                            <div class="info-up">
                                <span>及时完成率</span>
                            </div>
                            <div class="info-down">
                                <span>4</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">项目成员</h3>
                </div>
                <div class="panel-body">
                    <p>项目创建者</p>
                    <div class="col-xs-2">
                        <div class="name-header">
                            <span>{{ request.login_user.user.username.0 }}</span>
                        </div>
                    </div>
                    <div class="col-xs-10">
                        <div style="line-height: 50px">
                            <span>{{ request.login_user.user.username }}</span>
                        </div>
                    </div>
                    <p>项目参与者</p>
                    <div class="col-xs-2">
                        <div class="name-header">
                            <span>{{ request.login_user.user.username.0 }}</span>
                        </div>
                    </div>
                    <div class="col-xs-10">
                        <div style="line-height: 50px">
                            <span>{{ request.login_user.user.username }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">项目动态</h3>
                </div>
                <div class="panel-body">
                    <p>{{ request.login_user.user.username }} 在 {{ request.login_user.project.create_datetime }}
                        创建了该项目，目前共有{{ request.login_user.project.join_count }}个参与者</p>
                </div>
            </div>
        </div>
    </div>
{% endblock %}


{% block js %}
    <script src="{% static 'web/plugin/highcharts/highcharts.js' %}"></script>
    <script>
        $(function () {
            statisticChart();
            useSpacePie();
        });

        function statisticChart() {
            var chart = Highcharts.chart('statisticChart', {
                title: {
                    text: '工单完成情况统计汇总'
                },
                xAxis: {
                    categories: ['新建', '执行中', '已解决', '已关闭', '异常中']
                },
                plotOptions: {
                    series: {
                        stacking: 'normal'
                    }
                },
                labels: {
                    items: [{
                        html: '占比分析',
                        style: {
                            left: '100px',
                            top: '18px',
                            color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
                        }
                    }]
                },
                series: [{
                    type: 'column',
                    name: 'user1',
                    data: [3, 2, 1, 3, 4]
                }, {
                    type: 'column',
                    name: 'user2',
                    data: [2, 3, 5, 7, 6]
                }, {
                    type: 'column',
                    name: 'user3',
                    data: [4, 3, 3, 9, 0]
                }, {
                    type: 'spline',
                    name: '平均值',
                    data: [3, 2.67, 3, 6.33, 3.33],
                    marker: {
                        lineWidth: 2,
                        lineColor: Highcharts.getOptions().colors[3],
                        fillColor: 'white'
                    }
                }, {
                    type: 'pie',
                    name: '总的消耗',
                    data: [{
                        name: 'user1',
                        y: 13,
                        color: Highcharts.getOptions().colors[0]
                    }, {
                        name: 'user2',
                        y: 23,
                        color: Highcharts.getOptions().colors[1]
                    }, {
                        name: 'user3',
                        y: 19,
                        color: Highcharts.getOptions().colors[2]
                    }],
                    center: [100, 80],
                    size: 100,
                    showInLegend: false,
                    dataLabels: {
                        enabled: false
                    }
                }]
            });
        }

        function useSpacePie() {
            var chart = Highcharts.chart('useSpacePie', {
                title: {
                    text: '使用空间<br>占比',
                    align: 'center',
                    verticalAlign: 'middle',
                    y: 50
                },
                tooltip: {
                    headerFormat: '{series.name}<br>',
                    pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        dataLabels: {
                            enabled: true,
                            distance: -50,
                            style: {
                                fontWeight: 'bold',
                                color: 'white',
                                textShadow: '0px 1px 2px black'
                            }
                        },
                        startAngle: -90, // 圆环的开始角度
                        endAngle: 90,    // 圆环的结束角度
                        center: ['50%', '75%']
                    }
                },
                series: [{
                    type: 'pie',
                    name: '使用空间占比',
                    innerSize: '50%',
                    data: [
                        ['已使用', 45.0],
                        ['未使用', 55.0],
                    ]
                }]
            });

        }

    </script>
{% endblock %}
